import { useEffect, useState } from "react"
import { reqAllType } from "../../api/tagType"
import { Tag } from "antd"
import { useDispatch } from "react-redux"
import { changeIssueType, changeTypeList } from "../../store/typeSlice"
const tagColors = [
  "#FF5733",
  "#33FF57",
  "#5733FF",
  "#FF33D1",
  "#33D1FF",
  "#D1FF33",
  "#FFA533",
  "#33FFA5",
  "#A533FF",
  "#FF337F",
  "#337FFF",
  "#7FFF33",
]
export const TypeList = () => {
  const [tagList, setTagList] = useState<JSX.Element[]>([])
  const dispatch = useDispatch()
  const getTagList = async () => {
    const res = await reqAllType()
    // 存起来
    dispatch(changeTypeList(res.data))
    // 根据结果进行渲染。
    // 每个标签被点击的时候，记录
    const arr = res.data.map((item, index) => {
      // {_id, typeName}
      return (
        <Tag
          key={item._id}
          color={tagColors[index % tagColors.length]}
          onClick={() => {
            dispatch(changeIssueType(item._id))
          }}
        >
          {item.typeName}
        </Tag>
      )
    })
    arr.unshift(
      <Tag
        key="all"
        color="red"
        onClick={() => {
          dispatch(changeIssueType("all"))
        }}
      >
        全部
      </Tag>
    )
    setTagList(arr)
  }

  useEffect(() => {
    getTagList()
  }, [])

  return <div>{tagList}</div>
}
